import { Form, Input } from 'antd-mobile'
import { CalendarPicker, List } from 'antd-mobile'
import dayjs from 'dayjs'
import React, { useState } from 'react'

const AddShop = () => {

  const [visible1, setVisible1] = useState(false);
  const [productionDate, setProductionDate]=useState();
  const editDate=(val)=>{ 
       const pDate= dayjs(val).format('YYYY-MM-DD');
        setProductionDate(pDate);
  }  
  const singleDate = new Date();


  return (
    <>
      <div className="viewShopContainer">
        <div>

          <Form layout='horizontal'>
            <Form.Item label='商品名' name='username'>
              <Input placeholder='请输入商品名称' clearable />
            </Form.Item>

            <Form.Item label='密码' name='password'>
              <Input placeholder='请输入密码' clearable type='password' />
            </Form.Item>
            
            <Form.Item label='规格' name='username'>
              <Input placeholder='示例: 1000g | ±10g' clearable />
            </Form.Item>

            <Form.Item label='商品价格' name='username'>
              <Input placeholder='请输入商品价格' clearable />
            </Form.Item>

            <List>
      <List.Item
      extra={productionDate}
        onClick={() => {
          setVisible1(true)
        }}
      >
        {/* 选择单个日期 */}
        <CalendarPicker
          visible={visible1}
          selectionMode='single'
          defaultValue={singleDate}
          onClose={() => setVisible1(false)}
          onConfirm={(val)=>editDate(val)}
          onMaskClick={() => setVisible1(false)}
        />生产日期
      </List.Item>
    </List>
          

            <Form.Item label='保质期' name='username'>
              <Input placeholder='请输入保质期(天数)' clearable />
            </Form.Item>

            <Form.Item label='商品描述' name='username'>
              <Input placeholder='请输入商品描述' clearable />
            </Form.Item>
          </Form>




        </div>
      </div>
    </>
  )
}

export default AddShop